<template>
  <view class="page">
    <view class="header">
      <view class="nav-left">
        <uni-icons type="left" size="20" color="#000000" />
      </view>
      <view class="nav-title">我的邀请</view>
      <view class="nav-right">
        <uni-icons type="more-filled" size="20" color="#000000" />
      </view>
    </view>
    <view class="content">
      <view class="recommend-tag">
        邀请({{ recommendList.length }})
        <view class="tag-line"></view>
      </view>
      <view class="recommend-list">
        <view
          class="recommend-item"
          v-for="(item, index) in recommendList"
          :key="index"
        >
          <image class="avatar" :src="item.avatar" mode="aspectFill" />
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="status">{{ item.status }}</view>
            <view class="time">{{ item.time }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "健康运动达人",
          status: "",
          time: "2023-12-20 12:30",
        },
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "运动小达人",
          status: "",
          time: "2023-12-20 11:30",
        },
        {
          avatar:
            "https://mastergo.com/ai/api/search-image?query=icon, minimalist 3D sports avatar, high quality details, prominent main subject, clear and sharp, subject fills 80 percent of frame, isolated on white background, centered composition, soft lighting, subtle shadows, modern style&width=100&height=100&orientation=squarish",
          name: "快乐运动家",
          status: "",
          time: "2023-12-20 10:30",
        },
        {
          avatar:
            "https://ai-public.mastergo.com/ai/img_res/c0b43635865ace475d21906678effd38.jpg",
          name: "瑜伽女神",
          status: "",
          time: "2023-12-20 09:30",
        },
        {
          avatar:
            "https://ai-public.mastergo.com/ai/img_res/0b92453051a26c066d407158a30303e7.jpg",
          name: "健身教练",
          status: "",
          time: "2023-12-20 08:30",
        },
      ]
    };
  }
};
</script>

<style>
page {
  height: 100%;
}
.page {
  background: #ffffff;
  min-height: 100%;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background: #ffffff;
  border-bottom: 1px solid #f5f5f5;
}
.nav-left {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}
.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.nav-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.content {
  padding: 32rpx;
}
.recommend-tag {
  position: relative;
  font-size: 16px;
  color: #4caf50;
  font-weight: 500;
  margin-bottom: 32rpx;
  display: inline-block;
}
.tag-line {
  position: absolute;
  bottom: -4rpx;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: #4caf50;
  border-radius: 2px;
}
.recommend-list {
  padding: 0 16rpx;
}
.recommend-item {
  display: flex;
  align-items: flex-start;
  padding: 32rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}
.info {
  flex: 1;
}
.name {
  font-size: 16px;
  color: #333333;
  margin-bottom: 8rpx;
  font-weight: 400;
}
.status {
  font-size: 14px;
  color: #4caf50;
  margin-bottom: 8rpx;
}
.time {
  font-size: 12px;
  color: #999999;
}
</style>